<template>
	<!-- <image class="barragebg-container" src="../../static/barrage/barragebg.png" mode=""></image> -->
	<view class="barragebg-container">
		<view class="text-area" v-show="!isPostWishSuccess">
			<textarea  :maxlength="50" placeholder-class="phcolor" v-model="textareabValue" placeholder="写下给大家的祝福" />
			<view class="wordNum"><text class="wordNum-text">{{textareabValueLength}}</text>/50字</view>
		</view>
		<view class="barragebg-container-tiger" v-show="isPostWishSuccess">
			<image class="img" src="../../static/barrage/tiger.png" mode=""></image>
			<text class="text">您已成功发送祝福</text>
		</view>
		<view class="barragebg-container-btn" @click="postWish">{{isPostWishSuccess ? '再次发送祝福' : '发送祝福'}}<strong><strong></strong></strong></view>
	</view>
</template>

<script>
	import submitBarrage from "../../api/submitBarrage.js"
	export default {
		name:"barragebg",
		created(){
			
		},
		data() {
			return {
				textareabValue:"",
				// 是否发送祝福,
				isPostWish:true,
				// 是否发送祝福成功
				isPostWishSuccess:false
			};
		},
		computed:{
			textareabValueLength(){
				return this.textareabValue.length;
			}
		},
		methods:{
			// 发送祝福
			postWish(){
				this.isPostWish = !this.isPostWish
				if(this.isPostWish){
					// 再次发送祝福
					this.isPostWishSuccess = false;
				}else{
					// 获取祝福文字
					console.log(this.textareabValue)
					
					// 验证
					if(this.textareabValue.replace(/\s/g, "") === ""){
						console.log(0)
						// 清空祝福文本
						this.textareabValue = "";
						// 提示弹窗
						uni.showToast({
						  title: "祝福不能为空",
						  icon: 'error',
						  duration:2000,
						  mask: true
						})
						return
					}
					
					
					uni.getStorage({
						key:"sys_userInfo",
						success:(result) => {
							// console.log(result.data.id)
							// 提交
							submitBarrage({
								uid:result.data.id,
								content:this.textareabValue
							}).then(result => {
								// console.log(result)
							})
						}
					})
		
		
					// 提交祝福成功
					if(true){
						this.isPostWishSuccess = true;
						
						// 清空祝福文本
						this.textareabValue = "";
					}
				}
			}
		}
	}
</script>

<style scoped lang="scss">
.barragebg-container{
	width:88%;
	height:50%;
	position:absolute;
	left:50%;
	top:calc(50% + 13%);
	transform: translate(-50%, -50%);
	background-image: url("../../static/barrage/barragebg.png");
	background-size:100% 100%;
	display:flex;
	flex-direction: column;
	align-items:center;
	justify-content:flex-end;
	padding:40rpx 60rpx;
	box-sizing: border-box;
	.barragebg-container-tiger{
		position:relative;
		width:100%;
		height:70%;
		margin-bottom:40rpx;
		display:flex;
		flex-direction: column;
		align-items:center;
		.img{
			margin-top:40rpx;
			width:60%;
			height:70%;
			margin-bottom:40rpx;
		}
		text{
			color:#FFDD04;
		}
	}
	.text-area{
		position:relative;
		width:100%;
		height:70%;
		margin-bottom:40rpx;
		textarea{
			width:100%;
			height:100%;
			color:#FFFFFF;
			font-size:28rpx;
			border-bottom:1rpx solid #FFF0BD;
			box-sizing: border-box;
		}
		.phcolor{
			color: #DC5D4F;
		}
		.wordNum{
			color:#eee;
			position:absolute;
			right:0;
			bottom:20rpx;
			font-size:24rpx;
		}
	}
	.barragebg-container-btn{
		width:100%;
		height:80rpx;
		background: linear-gradient(0deg, #FFA239, #FFDF02);
		border-radius:10rpx;
		text-align:center;
		line-height:80rpx;
		color:#CC252C;
		font-size:28rpx;
		font-weight:bold;
	}
}
</style>
